<template>
  <div class="demo2-wrap">
    <h1>当前求和为：{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Demo2',
  setup() {
    // 数据
    const sum = ref(0);

    return {
      sum
    };
  },
  beforeCreate() {
    console.log('----beforeCreate----');
  },
  created() {
    console.log('----created----');
  },
  beforeMount() {
    console.log('----beforeMount----');
  },
  mounted() {
    console.log('----mounted----');
  },
  beforeUpdate() {
    console.log('----beforeUpdate----');
  },
  updated() {
    console.log('----updated----');
  },
  beforeUnmount() {
    console.log('----beforeUnmount----');
  },
  unmounted() {
    console.log('----unmounted----');
  }
};
</script>

<style lang="scss" scoped>
.demo2-wrap {
  & > h1 {
    margin-bottom: 20px;
  }
  & > button {
    cursor: pointer;
  }
}
</style>
